<template>
  <div class="page-container-padding" style="display:flex;">
    <div style="width:900px;margin-right:10px;">
    <el-form label-width="80px">
      <el-form-item label="工作日期"><el-date-picker size="mini" v-model="taskObj.task_date" :clearable="false"></el-date-picker></el-form-item>
      <el-form-item label="标题"><el-input size="mini" v-model="taskObj.title" placeholder="非常规工作的项目名称"></el-input></el-form-item>
      <el-form-item label="工作类型">
        <el-select size="mini" v-model="taskObj.task_type">
          <el-option value="T00" label="投资报告撰写"></el-option>
          <el-option value="T01" label="材料撰写"></el-option>
          <el-option value="T02" label="PPT制作(非自主演讲)"></el-option>
          <el-option value="T03" label="走访客户"></el-option>
          <el-option value="T04" label="媒体采访"></el-option>
          <el-option value="T09" label="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主办方"><el-input size="mini" v-model="taskObj.sponsor" placeholder="工作的主办方"></el-input></el-form-item>
      <el-form-item label="申请者"><el-input size="mini" v-model="taskObj.applicant" placeholder="此项工作申请人"></el-input></el-form-item>
      <el-form-item label="联系电话"><el-input size="mini" v-model="taskObj.phone" placeholder="申请方联系电话"></el-input></el-form-item>
      <el-form-item label="瑞币情况"><el-input size="mini" v-model="taskObj.swiss_coin" placeholder="获得的瑞币数量,有合作者时按实际人数平均"></el-input></el-form-item>
      <el-form-item label="收入补贴"><el-input size="mini" v-model="taskObj.allowance"></el-input></el-form-item>
      <el-form-item label="合作者"><el-input size="mini" v-model="taskObj.partner" placeholder="一起完成工作的合作者名称"></el-input></el-form-item>
      <el-form-item label="备注"><el-input size="mini" v-model="taskObj.note" placeholder="备注说明"></el-input></el-form-item>
      <el-form-item label="附件">
        <el-upload action="''" :multiple="false" :before-upload="()=>false"
         :on-change="annexFileChange" >
          <div class="el-upload__text">
            <em style="color:#0066FF;">点击选择</em> (多文件请使用压缩包)
          </div>
        </el-upload>
        <span v-if="annexFilename">{{ annexFilename }} <i class="el-icon-delete-solid" style="color:#FF430D;margin-left:20px;cursor:pointer;" @click="annexFileRemove"></i></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="createSpecialTask" :loading="createLoading">确定提交</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div style="padding: 3px 5px;line-height:22px;max-width:450px;">
      <span class="explain-title">一、工作说明</span>
      <br>1、除了研究院日常工作外，研究员对公司和营业部的工作需求，及
          时提供帮助指导给出应对方案，以及协助公司各方面业务的开展。非
          常态工作内容包含：投资报告撰写（套保、套利、投资计划等）、走访
          客户、PPT 制作（非自主演讲的）、媒体采访、材料撰写等。演讲培训
          中由业务发起邀请的可以放入非常态工作演讲培训（业务申请）专项
          记录，纳入总统计量。主要是针对服务公司其他部门的服务情况，但
          是为了方便记录自己所有非常态工作，本部门的非常态工作也可以记
          录但不纳入统计。
      <br><span class="explain-title">二、工作要求</span>
      <br>1、公司任务由公司直接派发至研究院，管理人分配工作给研究员。营业部任务由营业部通过积分系统申请后，系统管理人下发给研究员。
      <br>2、研究员要认真及时地完成派发的任务，不清楚的事项要和申请页面上的申请人及时了解沟通。
      <br>3、任务完成后，发送给申请人。申请人也可在系统上对完成效果进行评价等级。
      <br>4、涉及相关书写材料附件上传到系统
      <br><span class="explain-title">三、考核评价</span>
      <br>1、主要考核服务其它部门的工作量情况、难易程度和完成质量。
      <br>2、安排专人进行质量控制，根据每项非常态工作任务考评服务难易程度、花费时间和完成质量分为 A、B、C、D、E，5 个等级。外
          部申请的报告、走访和材料撰写由申请人员或内部评审人员根据报告
          的篇幅、逻辑、价值进行评价。
      <br>3、前期以数量为基础，最终结合等级进行排名调整。
    </div>
  </div>
</template>

<script>
import { datetimeToStr } from '@/utils/datetimeUtils'
import { addMySpecialTask } from '@/api/departmentWork/specialTask'
export default{
  data(){
    return {
      taskObj: {
        task_date: new Date(),
        title: '',
        task_type: '',
        sponsor: '',
        applicant: '',
        phone: '',
        swiss_coin: 0,
        allowance: 0,
        partner: '',
        note: '',
        score: 0,
        annex_file: null
      },
      annexFilename: '',
      createLoading: false

    }
  },
  mounted() {

  },
  methods: {
    annexFileChange(file, fileList){
      this.annexFilename = file.name
      this.taskObj.annex_file = file.raw
    },

    annexFileRemove(){
      this.taskObj.annex_file = null
      this.annexFilename = ''
    },

    // 上传非常规工作
    createSpecialTask(){
      let formData = new FormData()
      const bodyData = {
        create_date: datetimeToStr(this.taskObj.task_date, true, '-'),
        title: this.taskObj.title,
        task_type: this.taskObj.task_type,
        sponsor: this.taskObj.sponsor,
        applicant: this.taskObj.applicant,
        phone: this.taskObj.phone,
        swiss_coin: this.taskObj.swiss_coin,
        allowance: this.taskObj.allowance,
        partner: this.taskObj.partner,
        note: this.taskObj.note
      }
      formData.append('body_data', JSON.stringify(bodyData))
      if (this.taskObj.annex_file !== null){
        formData.append('annex_file', this.taskObj.annex_file)
      }
      if (!bodyData.title || !bodyData.task_type){
        this.$baseMessage('工作的标题和类型为必填项', 'error')
        return
      }
      // 上传
      addMySpecialTask(formData).then(res => {
        this.$baseMessage(res.msg, res.code===201?'success':'error')
        if (res.code === 201){
          this.taskObj.title = ''
          this.taskObj.task_type = null
          this.taskObj.annex_file = null
          this.annexFilename = ''
        }
        this.createLoading = false
      }).catch(err=> {
        this.createLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.explain-title{
  font-weight:700;
  color: #006eff;
}
</style>
